<!-- Copyright 2015 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">

<link rel="import" href="../../components/gaia_header.html">
<link rel="import" href="../../components/gaia_input_form.html">
<link rel="import" href="../../components/gaia_button.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_dialog_host_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_back_button.html">
<link rel="import" href="../../components/buttons/oobe_next_button.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_content_dialog.html">

<!--
  Offline UI for the Login flow.
  Contains two cards with a slide transition between them:
    1. Email input form.
    2. Password input form.

  Example:
    <offline-login-element></offline-login-element>

  Attributes:
    'showEnterpriseMessage' - If the "manged by" message should be shown.
    'manager' - The entity (email or domain) the device is managed by.
    'emailDomain' - autocomplete domain for the email input.

  Events:
    'authCompleted' - fired when user enters login and password. Fires with an
                      argument |credentials| which contains.
                      |credentials| = { 'useOffline': true,
                                        'email': <email>,
                                        'password': <typed password> }
                      If user did not type domain |email| will be added by
                      "@gmail.com" or by 'emailDomain' if it is set.
  Methods:
    'focus' - focuses current screen (email input or password input);
    'setEmail' - accepts an argument |email|. If |email| is empty it sets
                 current screen to the email input, otherwise it sets current
                 screen to password input and shows error that previously
                 entered password is incorrect.
-->
<dom-module id="offline-login-element">
  <template>
    <style include="cr-shared-style oobe-dialog-host-styles">
      :host {
        --offline-login-dialog-width: 100%;
        --offline-login-animation-margin: 50%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        position: relative;
      }

      #forgotPasswordDlg::part(dialog) {
        color: var(--primary-text-color);
        font-size: 15px;
        width: 384px;
      }

      cr-input {
        --cr-input-padding-start: 0px;
      }

      /* icon, title, subtitle styles must approximate current Gaia style. */

      #icon {
        height: 32px;
        margin: 60px 64px 0 64px;
      }

      #title-container {
        padding-top: 20px;
      }

      h1 {
        color: var(--oobe-header-text-color);
        @apply --oobe-header-font;
        margin: 0;
      }

      #subtitle-container {
        padding-top: 8px;
      }

      #subtitle-container * {
        color: var(--oobe-subheader-text-color);
        line-height: var(--subtitle-line-height);
        margin: 0;
      }

      /** ******** Animations ******* */

      /*
       * Normally, only e-mail section is animated, pushing password section to
       * the right outside of visible area.
       */

      /* Fixed window over sliding content in #animation-inner-container. */
      #animation-outer-container {
        overflow: hidden;
        width: var(--offline-login-dialog-width);
      }

      #animation-inner-container {
        width: calc(2 * var(--offline-login-dialog-width));
      }

      .section {
        --section-padding: var(--oobe-dialog-content-padding);
        --section-width: var(--offline-login-animation-margin);
        animation-duration: 700ms;
        box-sizing: border-box;
        display: none;
        /*
         * For sliding to work correctly we need fixed size of moving objects.
         */
        max-width: var(--section-width);
        min-width: var(--section-width);
        padding: 0 var(--section-padding);
      }

      @keyframes show-from-left {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0%);
        }
      }

      @keyframes show-from-right {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0%);
        }
      }

      @keyframes hide-to-left {
        from {
          transform: translateX(0%);
        }
        to {
          transform: translateX(-100%);
        }
      }

      @keyframes hide-to-right {
        from {
          transform: translateX(0%);
        }
        to {
          transform: translateX(100%);
        }
      }

      oobe-content-dialog[selected='emailSection'] #email-section,
      oobe-content-dialog[selected='passwordSection'] #password-section {
        display: block;
      }

      /*
       * When dialog first appears, no animation needed.
       * Dialog always starts with e-mail section visible, so only "show"
       * animation depends on |animation-in-progress| attribute.
       */
      oobe-content-dialog[animation-in-progress] .section {
        animation-name: show-from-left;
      }

      oobe-content-dialog[selected='passwordSection'] .section {
        animation-name: hide-to-left;
      }

      :host([rtl]) oobe-content-dialog[animation-in-progress] .section {
        animation-name: show-from-right;
      }

      :host([rtl]) oobe-content-dialog[selected='passwordSection'] .section {
        animation-name: hide-to-right;
      }

      /** During animation all sections should be visible. */
      oobe-content-dialog[animation-in-progress] .section {
        display: block;
      }
    </style>
    <oobe-content-dialog role="dialog" selected$="[[activeSection]]"
        id="dialog" no-footer-padding
        animation-in-progress$="[[animationInProgress]]">
      <div slot="content">
        <img id="icon" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
      </div>
      <div id="animation-outer-container" slot="content">
        <div id="animation-inner-container" class="flex layout horizontal">
          <div id="email-section" class="section"
              on-animationend="onSlideAnimationEnd_">
            <div id="title-container" class="layout vertical end-justified">
              <h1>[[i18nDynamic(locale, 'loginWelcomeMessage')]]</h1>
            </div>
            <div id="subtitle-container">
              <div id="managedBy" class="enterprise-info"
                  hidden$="[[!manager]]">
                  [[i18nDynamic(locale, 'enterpriseInfoMessage', manager)]]
              </div>
            </div>
            <gaia-input-form id="email-input-form"
                on-submit="onNextButtonClicked_" disabled="[[disabled]]">
              <cr-input slot="inputs" id="emailInput" value="{{email_}}"
                  clear-error required
                  error-message="[[i18nDynamic(
                      locale, 'offlineLoginInvalidEmail')]]"
                  placeholder="[[i18nDynamic(locale, 'offlineLoginEmail')]]">
                <span slot="inline-suffix">[[displayDomain_]]</span>
              </cr-input>
            </gaia-input-form>
          </div>
          <div id="password-section" class="section">
            <div id="title-container" class="layout vertical end-justified">
              <gaia-header id="passwordHeader" email="[[fullEmail_]]">
              </gaia-header>
            </div>
            <div id="subtitle-container">
            </div>
            <gaia-input-form id="password-input-form"
                on-submit="onNextButtonClicked_" disabled="[[disabled]]">
              <cr-input slot="inputs" id="passwordInput" value="{{password_}}"
                  type="password" clear-error required
                  error-message="[[i18nDynamic(
                      locale, 'offlineLoginInvalidPassword')]]"
                  placeholder="[[i18nDynamic(locale, 'offlineLoginPassword')]]">
              </cr-input>
              <gaia-button on-click="onForgotPasswordClicked_" link>
                [[i18nDynamic(locale, 'offlineLoginForgotPasswordBtn')]]
              </gaia-button>
            </gaia-input-form>
          </div>
        </div>
      </div>
      <div slot="back-navigation">
        <oobe-back-button id="backButton"
            on-click="onBackButtonClicked_"></oobe-back-button>
      </div>
      <div slot="bottom-buttons">
        <oobe-next-button id="nextButton"
            on-click="onNextButtonClicked_"></oobe-next-button>
      </div>
    </oobe-content-dialog>
    <cr-dialog id="forgotPasswordDlg"
        on-close="onDialogOverlayClosed_">
      <div slot="body">
        [[i18nDynamic(locale, 'offlineLoginForgotPasswordDlg')]]
      </div>
      <div slot="button-container">
        <cr-button autofocus on-click="onForgotPasswordCloseTap_"
            class="action-button">
          [[i18nDynamic(locale, 'offlineLoginCloseBtn')]]
        </cr-button>
      </div>
    </cr-dialog>
    <cr-dialog id="onlineRequiredDialog"
        on-close="onDialogOverlayClosed_">
      <div slot="title">
        [[i18nDynamic(locale, 'offlineLoginWarningTitle')]]
      </div>
      <div slot="body">
        [[i18nDynamic(locale, 'offlineLoginWarning', manager, email_)]]
      </div>
      <div slot="button-container">
        <cr-button autofocus on-click="onOnlineRequiredDialogCloseTap_"
            id="offlineWarningBackButton" class="action-button">
          [[i18nDynamic(locale, 'offlineLoginOkBtn')]]
        </cr-button>
      </div>
    </cr-dialog>
  </template>
  <script src="offline_login.js"></script>
</dom-module>
